<template>
	<view class="gy-tabs" :id="id">
		<scroll-view
            :scroll-x="props.scroll"
            :scroll-into-view="scrollId"
            scroll-with-animation
            class="gy-tabs-box"
            :style="{
                textAlign: !props.scroll ? 'center' : 'left',
                width: props.action ? `calc(100% - 50px)` : '100%'
            }">
			<view
				class="gy-tabs-item"
                :class="{active: props.current === index}"
				:id="'gy-tabs-item-' + index"
				v-for="(item,index) in props.list"
				:key="index"
				:style="{
					width: !props.scroll ? `calc(100% / ${props.list.length})` : 'auto'
                }"
				@click.stop="selectFn(index)">
				<com-icon v-if="item.icon" :name="item.icon" />
				<view class="gy-tabs-item-label">{{ item.label }}</view>
			</view>
            <view class="gy-tabs-indicator" :style="{
                width: indicatorWidth,
                transform: `translateX(${ indicatorPosition })`
            }"></view>
		</scroll-view>
		<slot>
			<view v-if="props.action" class="gy-tabs-more gy_icon_more" @click.stop="emits('action')"></view>
		</slot>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref,
		watch,
    	onMounted,
		getCurrentInstance
    } from "vue";

    const emits = defineEmits(["change", "action",'tabHeight']);

    const props = defineProps({
        current: {
        	type: Number,
        	default: 0
        },
        list: {
        	type: Array as () => Array<any>,
        	default: () => []
        },
        scroll: {
        	type: Boolean,
        	default: true
        },
        action: {
        	type: Boolean,
        	default: false
        }
    });

	const { proxy } = getCurrentInstance();
	const id = ref("gy-state-bar-" + getUid());

    const positionList: any = ref([]);
    const scrollId = ref("gy-tabs-item-0");
    const indicatorWidth = ref("0em");
    const indicatorPosition = ref("20rpx");

    function selectFn(index: number){
    	emits("change", index);
    }

	function getUid() {
	    function S4() {
	       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
	    }
	    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
	}

    watch(() => props.current, (newValue: any, oldValue: number) => {
    	scrollId.value = "gy-tabs-item-" + (props.current === 0 ? 0 : (props.current - 1));
		resetIndicatorFn();
    }, { immediate: true });

	function resetIndicatorFn(){
		indicatorWidth.value = props.list[props.current].label.length + "em";
		if(!props.scroll){
			indicatorPosition.value = `calc(${ 100 / (props.list.length * 2) + ((100 / props.list.length) * props.current) }vw - ${ props.list[props.current].label.length / 2 }em)`
		}else{
			indicatorPosition.value = positionList.value.length > 0 ? (positionList.value[props.current] + 10 + "px") : "10px";
		}
	}

    onMounted(() => {
        setTimeout(async () => {

			// #ifdef H5
			uni.createSelectorQuery().select(`#${ id.value }`).boundingClientRect((parent: any)=>{
				uni.createSelectorQuery().selectAll(".gy-tabs-item").boundingClientRect((childs: any)=>{
					childs.forEach((item: any) => {
						positionList.value.push(item.left - parent.left);
					})
					resetIndicatorFn();
				}).exec();
			}).exec();
			// #endif

			// #ifdef MP-WEIXIN
			proxy.createSelectorQuery().select(`#${ id.value }`).boundingClientRect((parent: any)=>{
				emits('tabHeight', parent.height)
				proxy.createSelectorQuery().selectAll(".gy-tabs-item").boundingClientRect((childs: any)=>{
					childs.forEach((item: any) => {
						positionList.value.push(item.left - parent.left);
					})
					resetIndicatorFn();
				}).exec();
			}).exec();
			// #endif

        }, 100);
    })

</script>

<style lang="scss" scoped>
	.gy-tabs{
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;
	    background-color: #fff;
	    @include flex-center-center;
	    .gy-tabs-box{
	        position: relative;
	        white-space: nowrap;
	        .gy-tabs-item{
	            height: 100rpx;
	            z-index: 1;
	            @include flex-center-center;
	            display: inline-flex;
	            border-bottom: 4rpx solid transparent;
	            color: var(--gy-text-color-secondary);
	            padding: 0 20rpx;
				vertical-align: top;
	            .gy-icon{
	                margin-right: 5rpx;
	            }
	            .gy-tabs-item-label{
	                z-index: 1;
					font-size: var(--gy-font-size-medium);
	            }
	        }
	        .gy-tabs-item.active{
	            color: var(--gy-text-color-primary);
	            font-weight: bold;
	        }
	        .gy-tabs-indicator{
	        	position: absolute;
	        	top: 45rpx;
	            z-index: 0;
	            width: 0;
	        	height: 20rpx;
	            background: var(--gy-color-primary-linear-gradient);
	        	transition: 0.2s;
	        }
	    }
	    .gy-tabs-more{
	        width: 100rpx;
	        height: 100rpx;
	        @include flex-center-center;
	        border-bottom: 4rpx solid transparent;
	    }
	}
</style>
